<!-- 
自定义验证码输入、密码输入使用
 
使用方法：
maxlength：输入最大长度
isPwd：是否是密码模式
@finish：回调函数
 <validcode :maxlength="4" :isPwd="false" @finish="finish"></validcode>
 -->
<template>
	<view class="code-area" @click="getFocus">
		<view class="flex-box">
			<input
			    :value="val"
				type="number"
				:focus="isFocus"
				:maxlength="maxlength"
				class="hide-input"
				@input="getVal"
			/>
			<view v-bind:class="['item', 'item1' , { active: codeIndex == 1 && isFocus }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 1">
					<text class="dot">.</text>
				</block>
				<block v-else>	{{ codeArr[0] ? codeArr[0] : ''}}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 2 && isFocus }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 2">
					<text class="dot">.</text>
				</block>
				<block v-else>	{{ codeArr[1] ? codeArr[1] : ''}}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 3 && isFocus }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 3">
					<text class="dot">.</text>
				</block>
				<block v-else>	{{ codeArr[2] ? codeArr[2] : ''}}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 4 && isFocus }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 4">
					<text class="dot">.</text>
				</block>
				<block v-else>	{{ codeArr[3] ? codeArr[3] : ''}}</block>
			</view>
			<block v-if="maxlength === 6">				
				<view v-bind:class="['item', { active: codeIndex == 5 && isFocus }]">
					<view class="line"></view>
					<block v-if="isPwd && codeArr.length >= 5">
						<text class="dot">.</text>
					</block>
					<block v-else>	{{ codeArr[4] ? codeArr[4] : ''}}</block>
				</view>
				<view v-bind:class="['item', { active: codeIndex == 6 && isFocus }]">
					<view class="line"></view>
					<block v-if="isPwd && codeArr.length >= 6">
						<text class="dot">.</text>
					</block>
					<block v-else>	{{ codeArr[5] ? codeArr[5] : ''}}</block>
				</view>
			</block>
			
			
		</view>
	</view>
</template>

<script>
export default {
	props: {
		//最大长度 值为4或者6
		maxlength: {
			type: Number,
			default: 4
		},
		//是否是密码
		isPwd: {
			type: Boolean,
			default: false
		},
		isFocus: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			codeIndex: 1, //下标
			codeArr: [],
			val:'',//输入框的值
		};
	},
	methods: {
		getFocus() {
			this.$emit('clickItem',this.isFocus);
		},
		//取值
		getVal(e) {
			let { value } = e.detail;
			this.val=value;
			// console.log('验证码:', value);
			let arr = value.split('');
			this.codeIndex = arr.length + 1;
			this.codeArr = arr;
			// console.log(this.codeIndex, this.pwdArr);
			if (this.codeIndex > Number(this.maxlength)) {
				//输入完成
				this.$emit('finish',this.codeArr.join(''));
			}
		},
		//清除验证码或者密码
		clear(){
			this.codeIndex=1;
			this.codeArr=[];
			this.val="";
		}
	}
};
</script>

<style lang="scss">
.code-area {
	width: 628rpx;
	margin: 0 auto;
	text-align: center;
	.flex-box {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: center;
		// border: 2rpx solid #cccccc;
	}

	.item {
		margin-right: 18rpx;
		box-sizing: border-box;
		position: relative;
		width: 86rpx;
		height: 112rpx;
		// margin-right: 18rpx;
		font-size: 42rpx;
		font-weight: bold;
		// color: #ffffff;
		// border-radius:24rpx;
		line-height: 100rpx;
		opacity:1;
		// border:4px solid rgba(255,255,255,1);
		
		background: #ECECEC;
		border-radius: 10rpx;
		color:#000;
	}
	// .item1{
	// 	border: none;
	// }
	.item:last-child {
		margin-right: 0;
	}

	// .active {
	// 	border-color: #ff4b4b;
	// }
	.active .line {
		display: block;
	}

	.line {
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 2rpx;
		height: 40rpx;
		background: #000;
		animation: twinkling 1s infinite ease;
	}

	.hide-input {
		position: absolute;
		top: 0;
		left: -100%;
		width: 200%;
		height: 100%;
		text-align: left;
		z-index: 9;
		opacity: 1;
	}

	@keyframes twinkling {
		0% {
			opacity: 0.2;
		}
		50% {
			opacity: 0.5;
		}
		100% {
			opacity: 0.2;
		}
	}
	
	.dot{
		font-size: 80rpx;
		line-height: 50rpx;
	}
}
</style>
